<template>
  <header>
    <!-- 顶部广告 -->
    <div class="top_ad" v-if="$route.path == '/index'" v-show="flag">
      <div class="overscreen">
        <div class="poster">
          <router-link to="/product/2"
            ><img
              src="../assets/image/mall_index/link_16251901878303.gif"
              alt=""
          /></router-link>
        </div>
      </div>
      <div class="close_top">
        <span @click="flag = false">x</span>
      </div>
    </div>
    <!-- 公共 顶部菜单 -->
    <div class="site_topbar">
      <div
        class="container"
        :class="{
          change:
            $route.path.includes('/product') &&
            $route.path == '/cart' &&
            $route.path == '/order/checkout',
        }"
      >
        <div class="row">
          <div class="fl">
            <router-link to="/">科沃斯官网</router-link>
            <span>|</span>
            <a href="javascript:void(0)">收藏我们</a>
          </div>
          <div class="right fr">
            <div class="nav_ad">
              <router-link to="/register" v-if="!phone"
                >新用户注册，领取20000积分礼包&gt;</router-link
              >
            </div>
            <div class="user">
              <router-link to="/vip" v-if="phone">{{
                phone | saveNum
              }}</router-link>
              <router-link to="/vip" v-if="phone">会员中心</router-link>
              <router-link to="/login" v-if="!phone">登录</router-link>
              <router-link to="/register" v-if="!phone">注册</router-link>
              <router-link to="/order">我的订单</router-link>
              <router-link to="/cart">购物车</router-link>
              <a href="" @click.prevent="outLogin" v-if="phone">退出</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 公共 logo 和搜索框 -->
    <div class="site_header">
      <div
        class="container"
        :class="{
          change:
            $route.path.includes('/product') &&
            $route.path == '/cart' &&
            $route.path == '/order/checkout',
        }"
      >
        <slot name="title">
          <div class="row">
            <div class="logo index fl">
              <router-link to="/">
                <img src="../assets/image/mall_index/ia_100000001.png" alt="" />
              </router-link>
            </div>
            <div class="seacrh fr">
              <form action="">
                <input
                  type="text"
                  v-model="ipt"
                  @keydown.enter.prevent="searchProd(ipt)"
                />
                <button type="button" @click="searchProd(ipt)">
                  <i class="iconfont icon-sousuo"></i>
                </button>
              </form>
              <div class="hotwords">
                <h1>
                  <span>
                    <strong>
                      <router-link to="/product/2"
                        >旗舰升级T9 MAX-最强地宝 再次革新</router-link
                      >
                    </strong>
                  </span>
                  <span>&nbsp;</span>
                  <span>
                    <strong>
                      <router-link to="/product/154"
                        >W920擦窗神器-强势来袭</router-link
                      >
                    </strong>
                  </span>
                </h1>
              </div>
            </div>
          </div>
        </slot>
      </div>
    </div>
    <!-- 公共 菜单 -->
    <div class="nav" v-if="!path">
      <div
        class="container"
        :class="{
          change:
            $route.path.includes('/product') &&
            $route.path == '/cart' &&
            $route.path == '/order/checkout',
        }"
      >
        <div class="row">
          <ul class="head_nav">
            <li class="all">
              <span>全部商品</span>
              <div
                class="side_nav"
                :class="{ disappear: $route.path != '/index' }"
              >
                <ul>
                  <li>
                    <div class="title">
                      <div class="title_width">
                        <router-link to="/deebot-list"
                          >扫地机器人-地宝</router-link
                        >
                        <div class="title_rec">
                          <router-link
                            v-for="(item, index) in deebotShow"
                            :key="index"
                            :to="'/product/' + item.id"
                            >{{ item.name }}</router-link
                          >
                        </div>
                      </div>
                      <i class="iconfont icon-arrow-right"></i>
                    </div>
                    <div class="goods-subcate">
                      <div class="goods-subcate-block tags">
                        <div class="subcate_title">帮你选机</div>
                        <div class="subcate_items">
                          <router-link to="/product/2">旗舰升级</router-link>
                          <router-link to="/product/125">年度爆款</router-link>
                          <router-link to="/product/112">AI识别</router-link>
                          <router-link to="/huanxin">以旧换新</router-link>
                          <router-link to="/product/421">除菌新品</router-link>
                          <router-link to="/product/423">口碑爆款</router-link>
                          <router-link to="/product/125"
                            >视觉导航升级</router-link
                          >
                        </div>
                      </div>
                      <div class="goods-subcate-block hot">
                        <div class="subcate_title">热门型号</div>
                        <div class="subcate_items">
                          <router-link
                            :to="`/product/${item.id}`"
                            v-for="(item, index) in deebotShow"
                            :key="index"
                            ><img :src="item.s_goods_photos[0].path" alt="" />{{
                              item.name
                            }}
                          </router-link>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="title">
                      <div class="title_width">
                        <router-link to="/winbot-list"
                          >擦窗机器人-窗宝</router-link
                        >
                        <div class="title_rec">
                          <router-link
                            :to="`/product/${item.id}`"
                            v-for="(item, index) in winbotShow"
                            :key="index"
                            >{{ item.name }}</router-link
                          >
                        </div>
                      </div>
                      <i class="iconfont icon-arrow-right"></i>
                    </div>
                    <div class="goods-subcate">
                      <div class="goods-subcate-block tags">
                        <div class="subcate_title">帮你选机</div>
                        <div class="subcate_items">
                          <router-link to="/winbot-list">无线窗宝</router-link>
                          <router-link to="/winbot-list">有线窗宝</router-link>
                          <router-link to="/product/154">热销爆款</router-link>
                          <router-link to="/winbot-list">好评推荐</router-link>
                          <router-link to="/winbot-list">高层必备</router-link>
                          <router-link to="/winbot-list">规划擦窗</router-link>
                        </div>
                      </div>
                      <div class="goods-subcate-block hot">
                        <div class="subcate_title">热门型号</div>
                        <div class="subcate_items">
                          <router-link
                            :to="`/product/${item.id}`"
                            v-for="(item, index) in winbotShow"
                            :key="index"
                            ><img :src="item.s_goods_photos[0].path" alt="" />{{
                              item.name
                            }}
                          </router-link>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="title">
                      <div class="title_width">
                        <a href="#/atmbot-list">空气净化机器人</a>
                        <div class="title_rec">
                          <router-link
                            v-for="(item, index) in atmbotShow"
                            :key="index"
                            :to="'/product/' + item.id"
                            >{{ item.name }}</router-link
                          >
                        </div>
                      </div>
                      <i class="iconfont icon-arrow-right"></i>
                    </div>
                    <div class="goods-subcate">
                      <div class="goods-subcate-block tags">
                        <div class="subcate_title">帮你选机</div>
                        <div class="subcate_items">
                          <router-link to="/product/190">年度新品</router-link>
                          <router-link to="/atmbot-list">人气推荐</router-link>
                          <router-link to="/product/183">移动净化</router-link>
                          <router-link to="/atmbot-list">规划净化</router-link>
                          <router-link to="/atmbot-list">APP智控</router-link>
                        </div>
                      </div>
                      <div class="goods-subcate-block hot">
                        <div class="subcate_title">热门型号</div>
                        <div class="subcate_items">
                          <router-link
                            :to="`/product/${item.id}`"
                            v-for="(item, index) in atmbotShow"
                            :key="index"
                            ><img :src="item.s_goods_photos[0].path" alt="" />{{
                              item.name
                            }}
                          </router-link>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="title">
                      <div class="title_width">
                        <router-link to="/peijian-list">配件专区</router-link>
                        <div class="title_rec">
                          <router-link to="/peijian-list">滤芯</router-link>
                          <router-link to="/peijian-list">拖布</router-link>
                          <router-link to="/peijian-list">边刷</router-link>
                          <router-link to="/peijian-list">滚刷</router-link>
                        </div>
                      </div>
                      <i class="iconfont icon-arrow-right"></i>
                    </div>
                    <div class="goods-subcate">
                      <div class="goods-subcate-block tags">
                        <div class="subcate_title">帮你选机</div>
                        <div class="subcate_items">
                          <router-link to="/peijian-list">地宝配件</router-link>
                          <router-link to="/peijian-list">窗宝配件</router-link>
                          <router-link to="/peijian-list">沁宝配件</router-link>
                          <router-link to="/peijian-list">管家配件</router-link>
                        </div>
                      </div>
                      <div class="goods-subcate-block hot">
                        <div class="subcate_title">热门型号</div>
                        <div class="subcate_items">
                          <router-link to="/peijian-list">
                            <img
                              src="../assets/image/mall_index/ia_100000011.png"
                              alt=""
                            />
                            滤芯
                          </router-link>
                          <router-link to="/peijian-list">
                            <img
                              src="../assets/image/mall_index/ia_100000012.png"
                              alt=""
                            />
                            拖布
                          </router-link>
                          <router-link to="/peijian-list">
                            <img
                              src="../assets/image/mall_index/ia_100000013.png"
                              alt=""
                            />
                            边刷
                          </router-link>
                          <router-link to="/peijian-list">
                            <img
                              src="../assets/image/mall_index/ia_100000014.png"
                              alt=""
                            />
                            滚刷
                          </router-link>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <li><router-link to="/">商城首页</router-link></li>
            <li><router-link to="/product/2">旗舰升级</router-link></li>
            <li><router-link to="/product/2">新品首发</router-link></li>
            <li><router-link to="/product/125">年度爆款</router-link></li>
            <li><router-link to="/huanxin">以旧换新</router-link></li>
            <li><router-link to="/peijian-list">全网配件</router-link></li>
          </ul>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import { loginOut } from "../assets/js/request.js";
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      flag: true,
      ipt: "",
      phone: sessionStorage.getItem("phone") || "",
    };
  },
  computed: {
    ...mapState("products", ["products"]),
    ...mapState("user", ["userInfo"]),
    ...mapGetters("products", ["deebotShow", "winbotShow", "atmbotShow"]),
    path() {
      let arr = [
        this.$route.path.startsWith("/vip"),
        this.$route.path == "/cart",
        this.$route.path == "/order/checkout",
        this.$route.path == "/order",
        this.$route.path == "/member",
      ];
      let routeCan = arr.some((ele) => ele == true);
      return routeCan;
    },
  },
  methods: {
    searchProd(ipt) {
      if (this.ipt) {
        this.$bus.$emit("sendIpt", ipt);
        this.$router.push(`/search/?word=${ipt}`);
        this.ipt = "";
      }
    },
    //退出登录
    outLogin() {
      loginOut().then(() => {
        sessionStorage.clear();
        this.phone = "";
        this.$router.push("/");
      });
    },
  },
  filters: {
    saveNum(val) {
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      return val.replace(reg, "$1****$2");
    },
  },
};
</script>

<style lang="scss">
header {
  .top_ad {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 80px;

    .overscreen {
      position: absolute;
      left: 50%;
      top: 0;
      margin-left: -2000px;
      width: 4000px;
      text-align: center;
    }

    .close_top {
      width: 19px;
      height: 19px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 999;
      text-align: center;
      background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0 !important;
      line-height: 19px;
      cursor: pointer;

      span {
        display: block;
        color: #fff;
        font-size: 20px;
      }
    }
  }

  .site_topbar {
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    background-color: #f2f2f2;

    .fl {
      a {
        font-size: 14px;
        color: #253746;
        text-decoration: none;

        &:hover {
          color: #ee0a3b;
        }
      }

      span {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding: 0 14px;
      }
    }

    .fr {
      display: flex;

      .nav_ad {
        margin-right: 10px;

        a {
          color: #ee0a3b;
        }
      }

      .user {
        a {
          display: inline-block;
          padding-left: 30px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: #253746;
          text-decoration: none;

          &:hover {
            color: #ee0a3b;
          }
        }
      }
    }
  }

  .site_header {
    overflow: hidden;
    background-color: #fff;

    .logo.index {
      padding: 26px 0;

      a {
        display: inline-block;
        vertical-align: middle;
        img {
          width: auto;
          height: 44px;
        }
      }
    }

    .seacrh {
      margin-top: 20px;

      form {
        position: relative;
        height: 40px;

        input {
          width: 412px;
          height: 40px;
          line-height: 40px;
          padding-left: 5px;
          outline: 0;
          color: #757575;
          border: 1px solid #ccc;
          background-color: #fff;
          float: left;
        }

        button {
          height: 40px;
          margin-left: -1px;
          width: 40px;
          cursor: pointer;
          color: #757575;
          border: 1px solid #ccc;
          background-color: #fff;
          float: left;

          .iconfont {
            font-size: 26px;
          }
        }
      }

      .hotwords {
        h1 {
          font-size: 20px;
          margin: 0;

          span {
            &:first-of-type {
              strong {
                a {
                  margin: 0;
                  display: inline-block;
                  color: #e53333;
                  font-size: 14px;
                  text-decoration: none;
                }
              }
            }

            &:last-of-type {
              strong {
                a {
                  margin: 0;
                  display: inline-block;
                  color: #003399;
                  font-size: 14px;
                  text-decoration: none;
                }
              }
            }
          }
        }
      }
    }
  }

  //导航栏
  .nav {
    background-color: #263746;

    .container {
      .head_nav {
        height: 40px;
        > li {
          width: 136px;
          height: 40px;
          float: left;
          line-height: 40px;
          text-align: center;

          > a {
            color: #fff;
            font-size: 16px;
            text-decoration: none;

            &:hover {
              color: #ee0a3b;
            }
          }

          &:first-of-type {
            position: relative;
            width: 232px;
            background-color: #ee0a3b;
            text-align: left;
            &:hover .side_nav {
              display: block;
            }

            span {
              padding-left: 10px;
              font-size: 16px;
              color: #fff;
            }

            //左侧边栏
            .side_nav {
              position: absolute;
              left: 0;
              top: 40px;
              width: 232px;
              background-color: #fff !important;
              z-index: 999;

              ul {
                li {
                  cursor: pointer;
                  width: 100%;
                  height: 90px;
                  padding-left: 15px;
                  padding-top: 20px;
                  padding-bottom: 20px;
                  text-align: left;
                  display: flex;
                  &:hover .goods-subcate {
                    display: block;
                  }

                  .title {
                    display: flex;

                    .title_width {
                      width: 195px;

                      > a {
                        display: block;
                        width: 195px;
                        height: 20px;
                        line-height: 20px;
                        font-size: 15px;
                        color: #253746;
                        text-decoration: none;

                        &:hover {
                          color: #ee0a3b;
                        }
                      }

                      .title_rec {
                        height: 25px;
                        overflow: hidden;

                        a {
                          display: block;
                          float: left;
                          height: 25px;
                          line-height: 25px;
                          font-size: 14px;
                          color: #757575;
                          text-decoration: none;

                          &:first-child ~ a {
                            margin-left: 5px;
                          }

                          &:hover {
                            color: #ee0a3b;
                          }
                        }
                      }

                      .iconfont {
                        width: 12px;
                        height: 90px;
                        line-height: 90px;
                        font-size: 20px;
                        color: #757575;
                      }
                    }
                  }

                  .goods-subcate {
                    display: none;
                    position: absolute;
                    top: 0;
                    left: 232px;
                    z-index: 9999;
                    width: 660px;
                    height: 450px;
                    background-color: #fff;
                    overflow: hidden;

                    .goods-subcate-block.tags {
                      margin: 0 auto;
                      width: 582px;
                      height: 220px;

                      .subcate_title {
                        font-size: 15px;
                        color: #d90936;
                        height: 64px;
                        line-height: 64px;
                        border-bottom: 1px solid #e0e0e0;
                      }

                      .subcate_items {
                        a {
                          display: block;
                          float: left;
                          width: 100px;
                          font-size: 14px;
                          padding-top: 23px;
                          color: #757575;
                          text-decoration: none;

                          &:hover {
                            color: #ee0a3b;
                          }
                          img {
                            width: 72px;
                            height: 72px;
                          }
                        }
                      }
                    }

                    .goods-subcate-block.hot {
                      margin: 0 auto;
                      width: 582px;
                      height: 230px;

                      .subcate_title {
                        font-size: 15px;
                        color: #d90936;
                        height: 64px;
                        line-height: 64px;
                        border-bottom: 1px solid #e0e0e0;
                      }

                      .subcate_items {
                        padding-top: 30px;

                        a {
                          display: block;
                          float: left;
                          width: 72px;
                          font-size: 14px;
                          line-height: 25px;
                          color: #757575;
                          text-align: center;
                          text-decoration: none;

                          &:hover {
                            color: #ee0a3b;
                          }

                          &:first-child ~ a {
                            margin-left: 50px;
                          }
                          img {
                            width: 72px;
                            height: 72px;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
            .disappear {
              display: none;
            }
          }

          &:nth-of-type(3) {
            a {
              color: #ee0a3b;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
.container.change {
  width: 1140px;
}
</style>